<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>popover | anni-ui</title>
    <link rel="stylesheet" href="../vars.css">
    <link rel="stylesheet" href="popover-core.css">

    <style>
        body {
            position: relative;
        }

        .trigger-btn {
            display: inline-flex;
            padding: 20px;
            background-color: red;
            cursor: pointer;
            position: absolute;
            right: 0;
            /* top: 50%; */
            /* left: 50%; */
            /* transform: translate(-50%, -50%); */
        }

        #popover_box_1 {
            & h1 {
                white-space: nowrap;
            }
        }
    </style>
</head>

<body>
    <div class="trigger-btn">触发按钮</div>

    <div id="popover_box_1" hidden>
        <h1>我是气泡</h1>
        <h1>我是气泡</h1>
        <h1>我是气泡</h1>
        <h1>我是气泡</h1>
        <h1>我是气泡</h1>
        <h1>我是气泡</h1>
    </div>

    <div style="height: 1000px;"></div>

    <script type="module">
        import popover from './popover.js'

        document.addEventListener('DOMContentLoaded', () => {

            const btn = document.querySelector('.trigger-btn');
            ['mouseover', 'click'].forEach(eventName => {
                btn.addEventListener(eventName, (e) => {
                    popover.open(e.target, {
                        from: '#popover_box_1',
                        // content: '',
                        classNames: 'aaaaaaaa',
                        styles: {
                            // 'width': '300px',
                            'max-height': '300px',
                        },
                        // placement: 'top',
                        placement: 'bottom',
                        // placement: 'left',
                        // placement: 'right',
                    })
                })
            })

        })
    </script>
</body>

</html>